<template>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        width="30%">
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="80px">
            <el-form-item v-if="dialogType === 'edit'" label="角色id" prop="name">
                <mt-input v-model="form.roleId" disabled :width="inputWidth"></mt-input>
            </el-form-item>
            <el-form-item label="角色名称" prop="name">
                <mt-input v-model="form.name" :width="inputWidth"></mt-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="description">
                <mt-input v-model="form.description" :width="inputWidth"></mt-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <mt-button tupe="submain" @click="handleClose">取消</mt-button>
            <mt-button @click="handleSubmitBtn">确定</mt-button>
        </span>
    </el-dialog>
</template>

<script>
import { resetObject } from "@/utils/index.js";
export default {
    name: "RoleDialog",

    data () {
        return {
            form: {
                roleId: "",
                name: "",
                description: ""
            },
            rules: {
                name: [{ required: true, message: "请输入角色名称", trigger: "blur" }]
            },
            dialogType: "add",
            dialogVisible: false,
            inputWidth: "calc(100% - 1rem)"
        };
    },

    computed: {
        title () {
            if (this.dialogType === "add") return "新建角色";
            else if (this.dialogType === "edit") return "编辑角色";
        }
    },

    created () {},

    mounted () {},

    methods: {
        /* 触发弹窗 */
        open (type = "add", item) {
            this._.assign(this.form, item);
            this.dialogType = type;
            this.dialogVisible = true;
        },

        /* 提交 */
        handleSubmitBtn () {
            this.$refs["form"].validate(valid => {
                if (valid) this.handleSubmit();
                else return false;
            });
        },
        handleSubmit () {
        if (this.dialogType === "add") {
            const params = {
                name: this.form.name,
                description: this.form.description
            };
            this.$request.post(this.API.ADD_ROLE, params).then(res => {
                if (res.success) {
                    this.$mtMessage.success("新增成功！");
                    this.handleClose();
                    this.$emit("update");
                }
            });
        }
        else if (this.dialogType === "edit") {
            const params = {
                roleId: this.form.roleId,
                name: this.form.name,
                description: this.form.description
            };
            this.$request.post(this.API.UPDATE_ROLE, params).then(res => {
                if (res.success) {
                    this.$mtMessage.success("修改成功！");
                    this.handleClose();
                    this.$emit("update");
                }
            });
        }
        },

        /* 关闭弹窗 */
        handleClose () {
            this.dialogVisible = false;
            resetObject(this.form);
        }
    }
}
</script>

<style lang="scss">
</style>